<template>
<div id="bg">
  <div id="input" style= "padding:50px 0;"><!--fixed能保证等比例放大缩小,margin-top: 150px;margin-left:800px;margin-right:300px;-->
  <p style= "text-align:center;color:white;font-size:30px"><b>教学网站定制系统</b></p>
  <p style= "text-align:center;margin-bottom:50px;color:white;font-size:15px">Teaching website customization system</p>
  <el-form :model="teacher" :rules = "rules" ref="teacherForm"> 
  <el-form-item prop="teacherName" >
      <el-input  size= "large"  placeholder= "请输入用户名" v-model= "teacher.teacherName" prefix-icon="el-icon-s-custom"></el-input>
  </el-form-item>
  <el-form-item prop="password"> 
      <el-input  size= "large" style= "margin-top:10px" placeholder= "请输入密码" v-model= "teacher.password" show-password prefix-icon="el-icon-s-goods">
      </el-input>
  </el-form-item>
    </el-form>
      <!-- <div style= "margin-top:10px">
        <el-checkbox v-model= "checked"><p style="color:white ">记住密码</p></el-checkbox>
      </div> -->
      
      <div>
      <br/>
        <el-button size="large" type="success" plain icon="el-icon-check" style= "padding:15px 209px" aria-autocomplete="off" @click= "submitForm('teacherForm')"></el-button>
      </div><!--aria-autocomplete表示是否给用户提供文本框自动提示-->

      <div>
      <br/>
        <el-button size="large" type="primary" plain style= "padding:15px 202px" aria-autocomplete="off" @click= "regist">注册</el-button>
      </div>

  </div>
</div>
</template>
<script>
export default {
  name:"login",
  data(){
    return {
      teacher:{
        teacherName:'',
        password:'',
        role:'',
        authorityList:[]
      },
      checked:false,// 记住密码
      rules:{
        teacherName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },//blur表示鼠标失焦的时候会触发提示
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },//blur表示鼠标失焦的时候会触发提示
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ]
      }

        }
    },
    methods:{
      submitForm(fromName){
        //先校验表单是否合法，不合法就不发出去
        this.$refs['teacherForm'].validate((valid) => {
          if (valid) {
        //合法，发出表单执行登录操作
         
        this.request.post("http://localhost:8081/teacher/login",this.teacher).then(res=>{
          if(res.flag=='200'){
            this.$router.push("/")
            this.$message.success("登录成功！")
            //拿出教师信息
            // var data = res.data
            // localStorage.data=data
            localStorage.setItem('teacher',JSON.stringify(res.data))//存储用户信息到本地
            localStorage.setItem('authorityList',JSON.stringify(res.data.authorityList))
            
          }
          else{
            this.$message.error(res.msg)
          }

        })
          } 
        });

      },
      regist(){
        this.$router.push("/regist")

      }
    }
  




}
</script>
<style scoped>
#bg{
background: 
url("../assets/login_bg.jpg");
width:100%;
height:100%;
position: fixed;
background-size: 100% 100%;
}
#input{
background-color: rgba(0,0,0,0);
width:435px;
height:420px;
position:absolute;
top: 150px;
left:550px;


}
</style>